<!-- 商品评价列表 -->
<template>
	<view class="container">
		<view class="comments">
			<view class="h">
				<view @tap="switchTab('')" :class="['h-item',showType == 0 ? 'active' : '']">
					<text>全部</text>
				</view>
				<view @tap="switchTab(1)" :class="['h-item',showType == 1 ? 'active' : '']">
					<text>有图</text>
				</view>
			</view>
			<view class="b">
				<empty v-if="emptyShow" :custom="true" src="/mall/static/images/no-comments.png" text="暂无评价"></empty>
				<scroll-view scroll-y="true" @scrolltoupper="scrolltoupper">
					<block v-for="(item, index) in comments" :key="index">
						<view class="item">
							<view class="info">
								<view class="user">
									<image lazy-load :src="item.avatar"></image>
									<text>{{ item.nickname }}</text>
								</view>
								<view class="info__rate">
									<uni-rate class="rate" active="white" normal="white" bgSeleColor="#E65431" bgNoSeleColor="grey" :isIndexRate="true"
									 :size="15" :current="item.product_score" disabled></uni-rate>
								</view>
								<!-- <view class="time">{{ item.add_time }}</view> -->
							</view>
							<view class="item-content">
								<view class="comment">{{ item.comment }}</view>
								<view class="imgs" v-if="item.pics">
									<image
										class="img"
										v-for="(pitem,inn) in item.pics"
										@tap="previewPic(item.pics,inn)"
										:key="inn"
										:src="pitem"
									></image>
								</view>
								<view class="spec"></view>
								<view class="it-bottom">
									<text v-if="item.suk">购买类型：{{item.suk}}</text>
									<text v-else></text>
									<text>{{item.add_time}}</text>
								</view>
								<view class="reply" v-if="item.merchant_reply_content">
									<text class="merchant_reply">商家回复：{{item.merchant_reply_content}}</text>
									<text class="reply_time">{{item.merchant_reply_time}}</text>
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
				<uni-load-more class="more" :status="nomore ? 'nomore' : 'more'"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import { replyList } from '@/api/mall.js';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	data() {
		return {
			emptyShow: false,
			comments: [],
			type: 0,
			goodsId: '',
			orderId: '',
			showType: 0,
			goodsCount: 0,
			picCount: 0,
			allPage: 1,
			picPage: 1,
			limit: 20,
			page: 1,
			nomore: false,
			is_image: ''
		};
	},
	components: {
		uniLoadMore
	},
	onLoad(options) {
		if (options.type) {
			this.type = options.type;
		}
		if (options.goodsId) {
			this.goodsId = options.goodsId;
		}
		if (options.orderId) {
			this.orderId = options.orderId;
		}
		this.getCommentList(this.goodsId);
	},
	methods: {
		getCommentList(id) {
			let that = this;
			replyList(id, {
				page: this.page,
				limit: this.limit,
				is_image: this.is_image
			}).then(res => {
				this.comments = [...this.comments, ...res.data];
				if (res.data.length < this.limit) {
					this.nomore = true;
				}
				if (this.comments.length == 0) {
					this.emptyShow = true
				}
			});
		},
		scrolltoupper() {
			if (!this.nomore) {
				this.page = this.page + 1;

				this.getCommentList(this.goodsId);
			}
		},
		switchTab(state) {
			this.is_image = state;
			this.comments = [];
			this.page = 1;
			this.showType = this.showType == 1 ? 0 : 1;

			this.getCommentList(this.goodsId);
		},
		onReachBottom() {
			if (this.showType == 0) {
				if (this.goodsCount / this.limit < this.allPage) {
					return false;
				}

				this.allPage = this.allPage + 1;
			} else {
				if (this.picCount / this.limit < this.picPage) {
					return false;
				}

				this.setData({
					picPage: this.picPage + 1
				});
			}
			this.getCommentList();
		},
		previewPic(urls,index) {
			// let url = e.currentTarget.dataset.url;
			// let urls = [];
			// urls[0] = url;
			uni.previewImage({
				urls: urls,
				current: index
			});
		}
	}
};
</script>

<style lang="less" scoped>
.comments {
	width: 92%;
	height: auto;
	background: #fff;
	margin: 20rpx auto;
	.h {
		width: 100%;
		box-shadow:0px 6rpx 8rpx 0px rgba(0, 0, 0, 0.05);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		width: 100%;
		display: flex;
		background: #fff;
	}
	.h .h-item {
		// border-bottom: 10rpx solid #EDEDED;
		display: inline-block;
		height: 82rpx;
		width: 50%;
		padding: 0 15rpx;
		text-align: center;
	}
	.h .h-item text {
		display: inline-block;
		padding: 0 20rpx;
		font-size: 22rpx;
		width: 170rpx;
		color: #999;
	}
	.h .h-item.active text{
		color: #FA3737;
		border-bottom: 4rpx solid #FB3737;
		height: 50rpx;
		width: 50rpx;
	}
	.b {
		margin-top: 130rpx;
		height: auto;
		width: 720rpx;
	}
	.b.no-h {
		margin-top: 0;
	}

	.item {
		height: auto;
		width: 720rpx;
		overflow: hidden;
		// border-bottom: 1px solid #d9d9d9;
		padding-bottom: 25rpx;
	}
	.info {
		width: 100%;
		padding: 33rpx 0 27rpx 0;
		display: flex;
		justify-content: space-between;
	}
	.item-content{
		padding-left: 90rpx;
		width: calc(100% - 125rpx);
	}
	.user {
		float: left;
		width: auto;
		height: 67rpx;
		line-height: 67rpx;
		font-size: 0;
	}
	
	.user image {
		float: left;
		width: 67rpx;
		height: 67rpx;
		margin-right: 17rpx;
		border-radius: 50%;
	}
	
	.user text {
		display: inline-block;
		width: auto;
		height: 66rpx;
		overflow: hidden;
		font-size: 29rpx;
		line-height: 66rpx;
	}
	.info__rate{
		.rate {
			margin-right: 30rpx;
		}
	}
	.comment {
		text-align: justify;
		line-height: 45.8rpx;
		font-size: 26rpx;
		margin-bottom: 16rpx;
		color: #333;
	}
	
	.imgs {
		// width: 720rpx;
		// height: 150rpx;
		margin-bottom: 25rpx;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		// justify-content: space-bsetween;
	}
	
	.imgs .img {
		height: 150rpx;
		width: 150rpx;
		margin-right: 28rpx;
		
	}
	
	.spec {
		width: 720rpx;
		height: 25rpx;
		font-size: 24rpx;
		color: #999;
	}
	
	.spec .item {
		color: #7f7f7f;
		font-size: 25rpx;
	}
	.it-bottom{
		font-size: 20rpx;
		color: #B3B3B3;
		display: flex;
		justify-content: space-between;
		
	}
	.reply{
		margin-top: 30rpx;
		background: #f5f5f5;
		color: #999;
		padding: 20rpx;
		border-radius: 10rpx;
		.merchant_reply{
			font-size: 24rpx;
			text-align: justify;
			line-height: 36rpx;
		}
		.reply_time{
			margin-top: 10rpx;
			display: block;
			text-align: right;
			font-size: 22rpx;
			color: #bbb;
		}
	}
	.more{
		margin-top: 100rpx;
	}
}


</style>
